<template>
  <el-form-item label="面试信息：" class="section-title" />
  <el-row>
    <div class="section-interview">一面</div>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="面试时间：">
        <span>{{ FirstData.firstInterviewerTime }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="面试结果：">
        <!-- <span>{{ FirstData.firstInterviewerResult }}</span> -->
        <span
          :style="{
            color: FirstData.firstInterviewerResult === 0 ? '#67C23A' : '',
          }"
        >
          {{
            FirstData.firstInterviewerResult == 0
              ? "面试通过"
              : FirstData.firstInterviewerResult == 1
              ? "面试不通过"
              : FirstData.firstInterviewerResult
          }}
        </span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="是否需要下一轮面试：">
        <!-- <span>{{ FirstData.isSecond }}</span> -->
        <span>{{
          FirstData.isSecond === 0 ? "是" : FirstData.isSecond === 1 ? "否" : ""
        }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="面试官：">
        <span>{{ FirstData.interviewerNameSecond }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="下一轮面试类型：">
        <!-- <span>业务面试</span> -->
        <el-select
          v-model="FirstData.interviewTypeSecond"
          :disabled="true"
          placeholder=""
        >
          <el-option label="业务面试" :value="0" />
          <el-option label="大领导面试" :value="1" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="下一轮面试方式：">
        <!-- <span>现场面试</span> -->
        <el-select
          v-model="FirstData.interviewMethodSecond"
          placeholder=""
          clearable
          :disabled="true"
        >
          <el-option
            v-for="item in sys_interview_method"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="面试时间：">
        <!-- appointmentTimeSecond -->
        <span>{{ FirstData.appointmentTimeSecond }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="24">
      <el-form-item label="第二轮面试地址/视频会议链接：">
        <span>{{ FirstData.addressSecond }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="24">
      <el-form-item label="面试记录的内容：">
        <span>{{ FirstData.firstContent }}</span>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
const activeTab = ref("first");
const props = defineProps({
  FirstData: Array,
  sys_interview_method: Array,
});
</script>

<style scoped lang='scss'>
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}
.section-interview {
  width: 80px;
  height: 30px;
  background: #f1f2f4;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #6f7b90;
}
span {
  font-size: 14px;
  font-weight: 400;
  color: #16191d;
}
:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-textarea__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-input.is-disabled) {
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}
</style>
